<#include "include/_meta.html"/>
<title>账户管理</title>
</head>
<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span
				class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理 <a
				class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
				href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="pd-20" id="accountList">
		<div class="text-c"> 用户名称：
			<input type="text" class="carii'dle=" style="width:250px" placeholder="输入用户名称" id="username"
			       name="">
			用户工号：
			<input type="text" class="personid" style="width:250px" placeholder="输入用户工号" id="personid"
			       name="">
			用户手机号：
			<input type="text" class="mobile" style="width:250px" placeholder="输入用户手机号" id="mobile"
			       name="mobile">
			<button type="button" onclick="searchAccount()" class="btn btn-success" id="searchUsers"
			        name="">
				<i class="Hui-iconfont">&#xe665;</i> 查询
			</button>
		</div>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
    <span class="l"><a href="javascript:;" onclick="dataDel()" class="btn btn-danger radius"><i
				    class="icon-trash"></i> 批量删除</a>
    <a href="javascript:;" onclick="show_win('550','','添加用户','/accounts/accountAdd')"
       class="btn btn-primary radius"><i class="icon-plus"></i> 添加用户</a></span>
			<span class="r">共有数据：<strong>{{info.total}}</strong> 条</span>
		</div>
		<table class="table table-border table-bordered table-hover table-bg table-sort">
			<thead>
				<tr class="text-c">
					<th width="25"><input type="checkbox" @change="checkAll" v-model="checked"
					                      name="checkedAll" value=""></th>
					<th width="100">用户名</th>
					<th width="90">昵称</th>
					<th width="90">姓名</th>
					<th width="150">手机号码</th>
					<th width="">员工工号</th>
					<th width="130">角色名称</th>
					<th width="90">所属租赁店</th>
					<th width="90">注册时间</th>
					<th width="60">是否启用</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-c" v-for="account in info.list">
					<td><input type="checkbox" name="uid" v-model="checkUid" :value="account.uid"></td>
					<td>{{account.username}}</td>
					<td>{{account.nickname}}</td>
					<td>{{account.realname}}</td>
					<td>{{account.mobile}}</td>
					<td>{{account.personid}}</td>
					<td v-if="account.role">{{account.role.rolename}}</td>
					<td v-else></td>
					<td v-if="account.dept">{{account.dept.deptname}}</td>
					<td v-else></td>
					<td>{{account.addtime}}</td>
					<td v-if="account.userstate == 1">
						<span class="label radius label-success">已启用</span>
					</td>
					<td v-else>
						<span class="label radius">已停用</span>
					</td>
					<td>
						<a href="javascript:void(0)" @click="admin_change_state(account.uid,false)"
						   v-if="account.userstate == 1" title="停用">
							<i class="Hui-iconfont">&#xe631;</i>
						</a>
						<a href="javascript:void(0)" @click="admin_change_state(account.uid,true)"
						   v-if="account.userstate == 2" title="启用">
							<i class="Hui-iconfont">&#xe615;</i>
						</a>
						<a href="javascript:void(0)"
						   @click="show_win('500','','编辑页面','/accounts/editPage/'+account.uid)">编辑</a>&nbsp;
						<a href="javascript:void(0)" @click="delOneAccount(account.uid)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div id="pageNav" class="pageNav"></div>
	</div>
    <#include "include/_footer.html"/>
	<script type="text/javascript">
    let accountList = new Vue({
      el: '#accountList',
      data: {
        info: {},
        checkUid: [],
        checked: false
      },
      watch: {
        checkModel() {
          this.checked = this.checkUid.length == this.info.list.length;
        }
      },
      methods: {
        checkAll() {
          if (!this.checked) {
            this.checkUid = [];
          } else {
            this.info.list.forEach((item) => {
              if (this.checkUid.indexOf(item.uid) == -1) {
                this.checkUid.push(item.uid)
              }
            })
          }
        }
      }
    });

    let username = null;
    let personid = null;
    let mobile = null;
    let currentPage = null;

    function show() {
      showAccounts(currentPage);
    }

    let showAccounts = function (curr) {
      $.ajax({
        url: '/accounts/selectAll',
        data: {
          username: username,
          personid: personid,
          mobile: mobile,
          pageSize: 10,
          curr: curr || 1
        },
        dataType: 'json',
        type: 'get',
        success: function (info) {
          accountList.info = info;
          laypage({
            cont: 'pageNav',
            pages: info.pages,
            skin: '#DB7032',
            first: '首页',
            last: '末页',
            curr: curr || 1,
            jump: function (obj, first) {
              if (!first) {
                currentPage = obj.curr;
                showAccounts(obj.curr);
              }
            }
          });
        }
      });
    }

    showAccounts();
    let show_win = function (weight, height, title, url) {
      layer_show(title, url, weight, height);
    };

    let dataDel = function () {
      let checkUid = new Array(accountList.checkUid);
      if (checkUid.length > 0) {
        layer.confirm('确定删除？', {btn: ['确定', '取消']}, function () {
          $.ajax({
            url: '/accounts/delete',
            type: 'post',
            dataType: 'json',
            traditional: true,
            data: {checkUid},
            success: function (data) {
              if (data) {
                layer.alert('删除成功');
                showAccounts(currentPage);
              } else {
                layer.alert('删除失败，请稍后再试');
              }
            }
          });
        });
      }
    };

    let searchAccount = function () {
      username = $('#username').val();
      personid = $('#personid').val();
      mobile = $('#mobile').val();
      currentPage = null;
      showAccounts();
    }

    let delOneAccount = function (uid) {
      layer.confirm('确定删除？', {btn: ['确定', '取消']}, function () {
        $.ajax({
          url: '/accounts/delOneAccount/' + uid,
          type: 'get',
          dataType: 'json',
          success: function (data) {
            console.log(data);
            if (data) {
              layer.alert('删除成功');
              showAccounts(currentPage);
            } else {
              layer.alert('删除失败，请稍后再试');
            }
          }
        })
      });
    }

    let admin_change_state = function (uid, flag) {
      let str = '';
      if (flag) {
        str = '启用';
      } else {
        str = '禁用';
      }
      layer.confirm('确定' + str + '?', {btn: ['确定', '取消']}, function () {
        $.ajax({
          url: '/accounts/adminStateChange/' + uid,
          data: {userstate: flag ? 1 : 2},
          dataType: 'json',
          type: 'get',
          success: function (flag) {
            if (flag) {
              layer.alert(str + '成功');
              showAccounts(currentPage);
            } else {
              layer.alert(str + '失败');
            }
          }
        })
      });
    };
	</script>
</body>
</html>